<template>
	<!-- uni-ui抽屉组件 -->
	<uni-drawer ref="Drawers" mode="left" :mask-click="true">
		<scroll-view style="height: 100%;" scroll-y>
			<!-- 搜索框 -->
			<!-- 当输入时触发事件-->
			<input type="text" placeholder="请输入名称" @input="inputs($event, text)" v-model="values">
			<!-- 使用获取的客户数据进行遍历 -->
			<!-- 点击选中对应的客户名称-->
			<view class="text" v-for="(item, index) in picker_arrs" :key="item.id" @click="choose(index)">
				{{ item.FName }}
			</view>
			<!-- uni-ui分页器组件 -->
			<!-- v-model为当前页码-->
			<uni-pagination :total="totals" v-model="currents" @change="paginations($event, text)"></uni-pagination>
		</scroll-view>
	</uni-drawer>
</template>

<script>
import {
	uniDrawer,
	uniPagination
} from '@dcloudio/uni-ui'
export default {
	date() {
		return {
			text: '',
			totals: this.total,
			currents: this.current, //物料编码分页器当前页数
			picker_arrs: this.picker_arr,
			timer: null,
			values: this.value
		}
	},
	watch: {
		picker_arr: {
			deep: true,
			immediate: true,
			handler(v) {
				this.picker_arrs = v
			}
		},
		total: {
			deep: true,
			immediate: true,
			handler(v) {
				this.totals = v
			}
		},
		value: {
			deep: true,
			immediate: true,
			handler(v) {
				this.values = v
			}
		},
		current: {
			deep: true,
			immediate: true,
			handler(v) {
				this.currents = v
			}
		},
	},
	props: ['current', 'text', 'picker_arr', 'total', 'value'],
	components: {
		uniDrawer, //uni-ui的抽屉组件
		uniPagination, //uni-ui的分页器组件
	},

	methods: {
		showDrawers(event) {
			// console.log(this.text);
			this.currents = 1;
			this.getlist(1, 20);
		},
		choose(index) {
			var data = this.picker_arrs[index]
			this.$emit('aiguigu', data)
			this.values = ''
			this.$refs["Drawers"].close();
		},
		// 搜索客户名称的输入框事件
		inputs(event, name) {
			// 设置防抖
			var key_word = event.detail.value //获取输入的文本作为搜索关键词

			clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				this.currents = 1; //客户数据分页器当前页数归1
				this.values = event.detail.value
				this.getlist_name(1, 20, key_word)
			}, 500)
		},
		// uni-ui分页器组件点击事件
		paginations(event, name) {
			// console.log(event, name);
			var currents = event.current; //提取当前页数
			if (this.values == undefined) { //如果输入框为空
				console.log(currents);
				this.getlist(currents, 20);
			} else {
				this.getlist_name(currents, 20, this.values)
			}
		},

		getlist_name(page, pageSize, name) {
			var data = {
				page: page,
				pageSize: pageSize,
				name: name
			}
			if (this.text == 'Supplier') {
				console.log(this.text);
				this.$Api.get + this.text + (data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Material') {
				this.$Api.getMaterial(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Stock') {
				this.$Api.getStock(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Account') {
				this.$Api.getAccount(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Consumer') {
				this.$Api.getConsumer(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Department') {
				this.$Api.getDepartment(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Currency') {
				this.$Api.getCurrency(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Emp') {
				this.$Api.getEmp(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Settle') {
				this.$Api.getSettle(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'unit') {
				this.$Api.getUnit(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			}
		},

		getlist(page, pageSize) {
			var data = {
				page: page,
				pageSize: pageSize
			}
			// console.log(this.text);
			if (this.text == 'Supplier') {
				this.$Api.getSupplier(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Material') {
				this.$Api.getMaterial(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Stock') {
				this.$Api.getStock(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Account') {
				this.$Api.getAccount(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Consumer') {
				this.$Api.getConsumer(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Department') {
				this.$Api.getDepartment(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Currency') {
				this.$Api.getCurrency(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Emp') {
				this.$Api.getEmp(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'Settle') {
				this.$Api.getSettle(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			} else if (this.text == 'unit') {
				this.$Api.getUnit(data).then(res => {
					this.totals = res.data.data.total;
					this.picker_arrs = res.data.data.list
					this.open(res)
				})
			}
		},

		open(res) {
			if (res.data.code == 1) {
				this.$nextTick(() => {
					this.$forceUpdate()
					this.$refs.Drawers.open();
				})
			}
		},
	}
}
</script>

<style lang="less">
scroll-view {
	input {
		border: 1px solid #e5e5e5;
		margin: 20rpx;
		padding-left: 20rpx;
	}

	.text {
		text-align: center;
		line-height: 64rpx;
		font-size: 28rpx;

		&:active {
			background-color: #ddd;
		}
	}

	.uni-pagination {
		//uni-ui分页器组件
		margin-top: 40rpx;
	}
}
</style>
